<template>
    <rx-layout style="padding:0 10px;box-sizing: border-box;">
        <template #middle>
            <rx-fit v-model="fitSearch">
                <template #head>
                    <div style="display: flex;align-items: center;justify-content: space-between;">
                        <div class="table-operator"></div>
                        <span class="search-btn" @click.stop="searchshow" @mousedown.stop><SearchOutlined/>{{ $ti18('rxList.leachBtn', '过滤') }}</span>
                    </div>
                </template>
                <template #search>
                    <rx-fit>
                        <template #middle>
                            <a-form layout="vertical">
                                <a-form-item :label="i18n('form.subject','标题')">
                                    <a-input :placeholder="i18n('form.subject','标题','input')" v-model:value="urlConfig.queryParam.Q_SUBJECT__S_LK"/>
                                </a-form-item>
                                <a-form-item :label="i18n('form.abstract','摘要')">
                                    <a-input :placeholder="i18n('form.abstract','摘要','input')" v-model:value="urlConfig.queryParam.Q_KEYWORDS__S_LK"/>
                                </a-form-item>
                            </a-form>
                            <div class="list-search-toolbar">
                                <a-button type="primary" @click="search">
                                    <SearchOutlined/>
                                    {{ $ti18('rxList.searchBtn', '查询') }}
                                </a-button>
                                <a-button style="margin-left: 4px" @click="resetSearch">
                                    {{ $ti18('rxList.resetBtn', '重置') }}
                                </a-button>
                            </div>
                        </template>
                    </rx-fit>
                </template>
                <template #middle>
                    <rx-grid ref="table"
                             :hasPage="true"
                             :urlConfig="urlConfig"
                             :selectConfig="selectConfig"
                             url="/api-portal/portal/core/insNews/getAllIssuedNews"
                             field="newId"
                             :columns="columns"
                    >
                        <template #subject="{row}">
                            <a-tag color="green" v-if="row.sysDicNew=='companyNews'">
                                {{i18n('list.news','公司新闻')}}
                            </a-tag>
                            <a-tag color="blue" v-else-if="row.sysDicNew=='companyNotice'">
                                {{i18n('list.Announcement','公司公告')}}
                            </a-tag>
                            <a  @click="getNewsDetail(row)">{{row.subject}}</a>
                        </template>
                        <template #status="{row}">
                            <a-tag :color="statusMap[row.status].color">
                                <span>{{ statusMap[row.status].text }}</span>
                            </a-tag>
                        </template>
                        <template #action="{ row }">
                            <RxGridAction :size="2">
                                <span><a @click="getNewsDetail(row)">{{i18n('list.view','查看')}}</a></span>
                            </RxGridAction>
                        </template>
                    </rx-grid>
                </template>
            </rx-fit>
        </template>
    </rx-layout>
</template>

<script>
/**
 * 新闻列表
 */
import {BaseList, RxFit,RxLayout,Util} from '@lowcode/jpaas-base-lib';
import InsNewsDetail from "./InsNewsDetail.vue";

export default {
    name: "InsNewsList",
    mixins: [BaseList],
    components: {
        RxFit,
        RxLayout
    },
    props: {},
    data() {
        return {
            urlConfig: {
                ajaxType: 'post',
                contentType: 'json',
                queryParam: {},
                dataField: 'result.data',
                totalField: 'result.totalCount'
            },
            selectConfig: {
                type: 'checkbox'
            },
            pageConfig: {
                pageSize: 10,
                pageSizes: [10, 30, 40]
            },
            columns: [
                {title: this.i18n('form.subject','标题'), field: 'subject', minWidth: 240,slots: {default: 'subject'}},
                {title:this.i18n('form.abstract','摘要'), field: 'keywords', minWidth: 240},
                {title:this.i18n('form.readTimes','阅读次数'), field: 'readTimes', minWidth: 80},
                {title:this.i18n('form.author','作者'), field: 'authorName', minWidth: 50},
                {title: this.i18n('form.status','状态'), field: 'status', minWidth: 60,slots: {default: 'status'}},
                {title: this.$ti18('rxList.action', '操作'), minWidth: 50, field: 'action', slots: {default: 'action'}}
            ],
            statusMap: {
                Issued: { color: 'green', text: this.i18n('form.publish','发布') },
                Draft: { color: 'red', text: this.i18n('form.draft','草稿') },
            },
        }
    },
    created() {
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"InsNews",key);
        },
        resetSearch() {
            this.urlConfig.queryParam = {};
            this.$nextTick(() => {
                this.$refs['table'].loadData();
            })
        },
        /**
         * 新闻明细
         */
        getNewsDetail(row){
            Util.open({
                component: InsNewsDetail,
                curVm: this,
                data: {pkId:row.pkId},
                widthHeight: ['1000px', '700px']
            });
        }
    },
    watch: {},
}
</script>

<style scoped>

</style>
